<template>
    <view class="pub_page pub_page_bg pub_ping_list pub_header_padding">
        <pub-head :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="page_content">
                <div class="tab_box">
                    <div class="li" :class="[categoryId===li.id?'li_active':'']" v-for="(li,key) in categoryList" :key="key" @click="categoryClick(li)">{{ li.title }}</div>
                </div>
                <z-paging ref="Zpaging" class="lis_box" v-model="list" @query="getList" :refresher-enabled="false" :fixed="false">
                    <div class="lis">
                        <PingList :list="list" />
                    </div>
                </z-paging>
            </div>
        </div>
    </view>
</template>

<script>
import PingList from './components/pingList.vue';
export default {
    components: { PingList },
    data() {
        return {
            headerConfig: {
                title: '利商拼团',//标题栏内容
                header_color: 'rgba(0,0,0,0)',
                left_type: 3,
            },

            categoryList: [],
            categoryId: '',
            list: [],
            loadFinish: false,
        };
    },
    mounted() {
        this.getCategoryList();
    },
    methods: {
        async getCategoryList() {
            const res = await this.$request.get('goods/getCategoryList', {});
            // console.log(res);
            if (res.code == 200 && res.result) {
                this.categoryList = res.result;
                if (this.categoryList.length > 0) {
                    this.categoryId = this.categoryList[0].id;
                    setTimeout(() => {
                        this.$comFun.openLoading();
                        this.$refs.Zpaging.reload()
                    }, 400);
                }
            }
        },
        categoryClick(li) {
            if (this.categoryId !== li.id) {
                this.categoryId = li.id;
                this.loadFinish = false;
                setTimeout(() => {
                    this.$comFun.openLoading();
                    this.$refs.Zpaging.reload()
                }, 400);
            }
        },
        async getList(pageNo, pageSize) {
            let data = {
                pageNo: pageNo,
                pageSize: pageSize,
                categoryId: this.categoryId,
            };
            const res = await this.$request.get('goods/getGoodsPage', data);
            this.$comFun.closeLoading();
            this.loadFinish = true;
            // console.log(res);
            if (res.code == 200) {
                const list = res.result.records.map(li => {
                    return {
                        ...li,
                        pro: (li.stock / li.maxNum).toFixed(2) * 100,
                    }
                })
                this.$refs.Zpaging.complete(list);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.pub_ping_list {
    .page_content {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        flex-direction: column;
        .tab_box {
            width: 100%;
            display: flex;
            overflow-x: auto;
            height: 90rpx;
            padding: 20rpx 0 0 24rpx;
            border-top-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
            background-image: linear-gradient(#ffcecb 30%, #fff);

            .li {
                flex: 0 0 auto;
                height: 50rpx;
                line-height: 50rpx;
                color: #3d3d3d;
                font-size: 32rpx;
                position: relative;
                margin: 0 48rpx 0 0;
                font-weight: 700;
            }

            .li_active {
                color: #e62017;
            }

            .li_active::before {
                width: 100%;
                height: 4rpx;
                border-radius: 2rpx;
                background-color: #e62017;
                position: absolute;
                bottom: 0;
                left: 0;
                content: "";
            }
        }

        .tab_box::-webkit-scrollbar {
            display: none;
        }

        .lis_box {
            width: 100%;
            flex: 1;
            background-color: #fff;
        }
    }
}
</style>
